<template>
	<view class="page">
		<jnavbar title="绑定账号"></jnavbar>
		<u-form class="form" label-width="160" :model="form" ref="uForm">
			<u-form-item label="账号类型" label-width="160" v-if="mallBaseinfo && !mallBaseinfo.is_reviewed">
				<u-radio-group v-model="form.type" @change="ChangeType">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.type">{{ item.name }}</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-width="160" label="备注名称"><u-input v-model="name" placeholder="请输入备注名称" /></u-form-item>
			<u-form-item v-if="form.type != 3" label-width="160" label="账号"><u-input v-model="form.card" /></u-form-item>
			<u-form-item v-else label-width="160" label="卡号"><u-input maxlength="23" v-model="card" /></u-form-item>
			<u-form-item  v-if="form.type != 3" label-width="160" label="收款码"><uploadimg :imglist="imgs" :maxnum="1" @getimg="getimg"></uploadimg></u-form-item>
			
			<u-button type="primary" @click="submit">提交</u-button>
		</u-form>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import uploadimg from '@/components/upload/upload.vue';

export default {
	data() {
		return {
			receipt_img:'',
			imgs:[],
			form: {
				name: '微信账号',
				card: '',
				type: 1
			},
			name: '',
			card: '',
			radioList: [
				{
					name: '微信',
					type: 1
				},
				{
					name: '支付宝',
					type: 2
				},
				{
					name: '银行卡',
					type: 3
				}
			]
		};
	},
	watch: {
		card() {
			if (/\S{5}/.test(this.card)) {
				let a = this.card.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
				this.card = a;
				this.form.card = a;
			}
		}
	},
	components:{
		uploadimg
	},
	computed: {
		...mapState({
			mallBaseinfo: state => state.mallBaseinfo
		})
	},
	methods: {
		getimg(imglist) {
			this.receipt_img=imglist[0]
			// this.logo = imglist;
		},
		ChangeType(e) {
			if (e == 1) {
				this.form.name = '微信账号';
			} else if (e == 2) {
				this.form.name = '支付宝账号';
			} else if (e == 3) {
				this.form.name = '银行卡号';
			}
		},
		submit() {
			if (!this.form.card) {
				uni.showToast({
					title: '请输入卡号',
					icon: 'none'
				});
			}
			let data = {
				name: this.name || this.form.name,
				resource: JSON.stringify(this.form)
			};
			if(this.receipt_img){
				data.receipt_img=this.receipt_img
			}
			this.$http('/user/card', data, 'POST').then(res => {
				uni.navigateBack();
			});
		}
	}
};
</script>

<style>
.page {
	padding: 0 32rpx;
	background: #fff;
	height: 100vh;
}
.form {
	background: #fff;
	width: 686rpx;
	/* margin-left: 24rpx; */
	/* padding: 12rpx; */
}
</style>
